<template>
  <div class="list_box">
    <p>个人中心</p>
    <ul>
      <li
        v-for="items of datas"
        :key="items.id"
        @click="toMove"
        :title="items.text"
      >
        {{items.text}}
      </li>
      <li class="zhezhao" ref="moveDom"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'IndexList',
  data () {
    return {
      datas: [
        {id: '01', text: '我的主页'},
        {id: '02', text: '个人设置'},
        {id: '03', text: '文章管理'}
      ]
    }
  },
  methods: {
    toMove () {
      this.$refs.moveDom.style.top = event.target.offsetTop + 'px'
      if (event.target.innerText === '我的主页') {
        var names = this.$route.query.name
        this.$store.commit('changeHomeTf', 1)
        this.$router.push({
          path: '/Myhome/article',
          query: {
            name: names
          }
        })
      } else if (event.target.innerText === '个人设置') {
        this.$router.push({
          path: '/userCenter/user',
          query: {
            name: this.$route.query.name
          }
        })
      } else if (event.target.innerText === '文章管理') {
        this.$router.push({
          path: '/userCenter/article',
          query: {
            name: this.$route.query.name
          }
        })
      }
    }
  },
  mounted () {
    if (this.$route.path === '/userCenter/user') {
      this.$refs.moveDom.style.top = '45px'
    } else if (this.$route.path === '/userCenter/article') {
      this.$refs.moveDom.style.top = '90px'
    }
  }
}
</script>

<style lang="stylus" scoped>
  .list_box{
    float: left
    width: 200px
    height: 300px
    background-color: rgb(255,255,255)
    p{
      font-size: .45rem
      margin: 0
      padding: .2rem
      cursor: default
    }
    ul{
      position: relative
      margin: 0
      padding: 0
      width: 100%
      height: 100%
      display: flex
      flex-direction: column
      list-style: none
      li{
        position: relative
        z-index: 2
        width: 100%
        box-sizing: border-box
        height: 45px
        line-height: 35px
        padding: .1rem
        cursor: pointer
        padding-left: .4rem
        border-top: 1px solid rgb(230,230,230)
        transition: all .3s
      }
      li:hover{
        font-size: .4rem
      }
      .zhezhao{
        position: absolute
        width: 100%
        box-sizing: border-box
        height: 45px
        z-index: 1
        background-color: rgb(15,153,213)
        transition: all .3s
      }
    }
  }
</style>
